<?php
session_start();
ignore_user_abort(1);
$sessionid = session_id();
?>

<!DOCTYPE html>
<html>

</html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>用户登录</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">

        <el-container direction="vertical">
            <el-header style="right: 0;">投资页面</el-header>
            <el-container>
                <el-aside width="18%" style="text-align: center;">
                    <span>总收益</span><br>

                    <span>{{allincome}}</span>
                </el-aside>
                <el-container>
                    <el-main>
                        <form action="round.php" method="POST" target="fmResult" id="data" name="dataform" v-show="formshow" style="line-height: 0px;">
                            <div style="text-align: center;line-height: 20px;padding-top:60px">
                                <span>第<font color="red">{{round}}</font>轮投资</span><br><br>
                                <span>请在10s内完成您的选择</span><br>
                                <span>倒计时：<font color="blue">{{countdown}}</font>s</span>
                            </div>
                            <el-radio-group v-model="radio1" @change.native="changelabel" :disabled="radioable" >
                                <el-radio-button label="0"></el-radio-button>
                                <el-radio-button label="1" :disabled="label1" id="label1"></el-radio-button>
                                <el-radio-button label="2" :disabled="label2"></el-radio-button>
                                <el-radio-button label="3" :disabled="label3"></el-radio-button>
                                <el-radio-button label="4" :disabled="label4"></el-radio-button>
                                <el-radio-button label="5" :disabled="label5"></el-radio-button><br>
                                <el-radio-button label="6" :disabled="label6"></el-radio-button>
                                <el-radio-button label="7" :disabled="label7"></el-radio-button>
                                <el-radio-button label="8" :disabled="label8"></el-radio-button>
                                <el-radio-button label="9" :disabled="label9"></el-radio-button>
                                <el-radio-button label="10" :disabled="label10"></el-radio-button><br>

                                <input type="text" name="num" v-model="radio1" v-show="false" id="username"><br>
                                <input type="text" name="sessionid" v-show="false" value="<?= $sessionid ?>"><br>
                                <input type="text" name="round" v-model="round" v-show="false"><br>
                                <br>
                                <br>
                                <div style="line-height: 0px">
                                    <el-button type="primary" round :disabled="submitable" @click="changeable" style="margin-top: 30%;">提交
                                    </el-button><br>

                                    <br>
                                    <el-button type="success" id="roundnum" round @click.native="changeround" :disabled="submitround" v-if="roundable" style="margin-top: 10%;">
                                        下一轮</el-button>
                                </div>
                            </el-radio-group><br><br>
                            <div v-show="other" style="text-align: center;line-height: 20px">
                                <span>
                                    <font>请等待其他成员提交</font>
                                </span><br>
                                <span>信息公示后</span>
                                <span>可进入下一轮</span>
                            </div>
                        </form>

                        <div v-show="endshow" style="line-height: 20px;padding-top:140px">
                            <p>投资结束</p><br>
                            <p>感谢参与</p><br>
                            <p>您的总收益为{{allincome}}</p><br>
                            <el-row style="text-align: center;">
                                <el-button type="primary" @click="back">回到首页</el-button><br><br>
                            </el-row>
                        </div>
                    </el-main>

                </el-container>

                <el-aside type="float:right" width="24%">
                    <span text-align="left">信息公示</span><br>
                    <div>
                        <iframe name="fmResult" frameborder="0"></iframe>
                    </div>
                </el-aside>

            </el-container>
        </el-container>


    </div>


    <!-- 定义各个元素的属性 -->
    <style type="text/css">
        #app,
        html,
        body {
            height: 100%;
            width: 100%;
            top: 0;
            padding: 0;
            margin: 0;
            left: 0;
        }

        .el-header {
            background-color: black;
            color: white;
            font: bold;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #ebebeb;
            color: #333;
            line-height: 180px;

        }

        .el-main {
            background-color: #ebebeb;
            color: #333;
            text-align: center;
            line-height: 140px;
        }

        .el-container {
            height: 100%;
            width: 100%;
        }
    </style>

    <script>
        document.addEventListener('visibilitychange', startStopVideo);

        function startStopVideo() {
            if (document.visibilityState === 'hidden') {
                axios.get('destroyed.php').then(res => {});
            }
        }
    </script>
    <!-- vue的参数设置 -->
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    maxround: 4, //总共进行几轮
                    maxgroupper: 4, //每组的人数
                    endshow: false,
                    formshow: true,
                    countdown: 10, //提交倒计时
                    radio1: '', //按钮的绑定值
                    round: 1, //第几轮
                    allincome: 10,
                    other: false,
                    submitable: true, //控制提交按钮的禁用状态
                    submitround: true, //控制下一轮按钮的禁用状态
                    radioable: false, //控制按钮组的禁用状态
                    label1: false, //控制每一个按钮的禁用状态
                    label2: false,
                    label3: false,
                    label4: false,
                    label5: false,
                    label6: false,
                    label7: false,
                    label8: false,
                    label9: false,
                    label10: false,
                    roundable: true
                };
            },
            mounted() {

                window.onbeforeunload = function(e) {
                    axios.get('destroyed.php').then(res => {});
                    return 'bye';
                }
            },
            methods: {
                back() {
                    window.addEventListener('pagehide', () => {
                        axios.get('destroyed.php').then(res => {});
                    });
                    window.location.href = "/index.html";
                },
                changelabel: function(val) { //更改单选框的change事件
                    let that = this;
                    that.submitable = false;
                },
                changeround: function() { //更改下一轮按钮的点击事件

                    this.round += 1;
                    this.submitround = true;
                    this.radioable = false;
                    this.radio1 = '';
                    this.countdown = 10;
                    this.other = false;
                    this.funcountdown();
                    this.autosubmit();
                    if (this.round == this.maxround) {
                        this.roundable = false;
                    };
                    if (this.allincome < 10 && this.allincome >= 9) {
                        this.label10 = true;
                    };
                    if (this.allincome < 9 && this.allincome >= 8) {
                        this.label10 = this.label9 = true;
                    };
                    if (this.allincome < 8 && this.allincome >= 7) {
                        this.label10 = this.label9 = this.label8 = true;
                    };
                    if (this.allincome < 7 && this.allincome >= 7) {
                        this.label10 = this.label9 = this.label8 = this.label7 = true;
                    };
                    if (this.allincome < 6 && this.allincome >= 5) {
                        this.label10 = this.label9 = this.label8 = this.label7 = this.label6 = true;
                    };
                    if (this.allincome < 5 && this.allincome >= 4) {
                        this.label10 = this.label9 = this.label8 = this.label7 = this.label6 = this.label5 = true;
                    };
                    if (this.allincome < 4 && this.allincome >= 3) {
                        this.label10 = this.label9 = this.label8 = this.label7 = this.label6 = this.label5 = this.label4 = true;
                    };
                    if (this.allincome < 3 && this.allincome >= 2) {
                        this.label10 = this.label9 = this.label8 = this.label7 = this.label6 = this.label5 = this.label4 = this.label3 = true;
                    };
                    if (this.allincome < 2 && this.allincome >= 1) {
                        this.label10 = this.label9 = this.label8 = this.label7 = this.label6 = this.label5 = this.label4 = this.label3 = this.label2 = true;
                    };
                    if (this.allincome < 1) {
                        this.label10 = this.label9 = this.label8 = this.label7 = this.label6 = this.label5 = this.label4 = this.label3 = this.label2 = this.label1 = true;
                    };
                },
                changeable: function() { //更改提交的点击事件
                    this.label1 = this.label2 = this.label3 = this.label4 = this.label5 = this.label6 = this.label7 = this.label8 = this.label9 = this.label10 = false;
                    this.radioable = true;
                    document.dataform.submit();
                    this.submitable = true;
                    this.countdown = 30;
                    this.other = true;
                    //使用qs和axios获取每次提交的人数，达到所有人都提交后才可以进行下一轮的要求
                    var qs = Qs;
                    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
                    var internal = setInterval(() => {
                        axios.post('judgesubmit.php', qs.stringify({
                            round: this.round
                        })).then(res => {
                            if (this.round == this.maxround && res.data == this.maxgroupper) {
                                this.endshow = true;
                                this.formshow = false;
                                clearInterval(internal);
                                return;
                            }
                            if (res.data == this.maxgroupper) {
                                this.submitround = false;
                                clearInterval(internal);
                                return;
                            }
                        });
                    }, 500)
                },
                getdata() {
                    setInterval(() => {
                        axios.get('callbackincome.php').then(res => {
                            this.allincome = res.data;
                        });
                    }, 100)
                },
                funcountdown() {
                    let round = this.round;
                    var internal = setInterval(() => {
                        --this.countdown;
                        if (this.countdown == 0) {
                            clearInterval(internal);
                            return 'ok';
                        }
                        if (round != this.round) {
                            clearInterval(internal);
                            return 'ok';
                        }
                    }, 1000);
                },
                autosubmit() {
                    let round = this.round;
                    var internal = setInterval(() => {
                        if (this.countdown == 0) {
                            // this.radio1 = document.getElementById("label1").value;
                            document.getElementById("username").value = 1;
                            this.label1 = this.label2 = this.label3 = this.label4 = this.label5 = this.label6 = this.label7 = this.label8 = this.label9 = this.label10 = false;
                            this.radioable = true;
                            document.dataform.submit();
                            this.submitable = true;
                            this.other = true;
                            var qs = Qs;
                            axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
                            var interval = setInterval(() => {
                                axios.post('judgesubmit.php', qs.stringify({
                                    round: this.round
                                })).then(res => {
                                    if (this.round == this.maxround && res.data == this.maxgroupper) {
                                        this.endshow = true;
                                        this.formshow = false;
                                        clearInterval(interval);
                                        return;
                                    }
                                    if (res.data == this.maxgroupper) {
                                        this.submitround = false;
                                        clearInterval(interval);
                                        return;
                                    }
                                });
                            }, 500)
                            clearInterval(internal);
                            return 'ok';
                        }
                        if (round != this.round) {
                            clearInterval(internal);
                            return 'ok';
                        }
                    }, 1000);

                }
            },
            created() {
                this.getdata();
                this.funcountdown();
                this.autosubmit();
            },
            destroyed() {
                axios.get('destroyed.php').then(res => {});
            },
        })
    </script>

</body>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</html>
<?php
session_destroy();
?>